<template>
  <a-tree
    class="camera-tree-container"
    v-model="checkedKeys"
    blockNode
    checkable
    :expanded-keys="expandedKeys"
    :auto-expand-parent="autoExpandParent"
    @expand="onExpand"
    :tree-data="treeData"
    :replaceFields="{ children: 'children', title: 'title', key: 'key' }"
    @select="selectTreeNode"
    @check="treeCheck"
  >
    <template slot="title" slot-scope="{ title }">
      <div class="tree-title" :title="title">
        {{ title }}
      </div>
      <!-- <span
        :class="[showStatus == 0 && 'close', 'state']"
        @click.stop="updateBimStatus(id, showStatus)"
      ></span> -->
    </template>
  </a-tree>
</template>

<script>
export default {
  data() {
    return {
      checkedKeys: [],
      expandedKeys: ["0-0"],
      autoExpandParent: true,
      treeData: [
        {
          title: "连云港区旗台作业区南区混矿堆场一期工程",
          key: "0-0",
          camDir: [
            -0.26100693765477057,
            0.5907417262399169,
            -0.7634786122578432,
          ],
          camPos: [13290458.388814235, 4129312.250977904, 1177.4443452693265],
          camRotate: [
            0.33748867791635223,
            0.06604609109819565,
            0.20746836012501177,
            0.9158035737405482,
          ],
          children: [
            {
              title: "球机",
              key: "0-0-0",
              camDir: [
                -0.14850754798803745,
                0.5586994552828733,
                -0.8159659471186291,
              ],
              camPos: [
                13292471.86721786,
                4128103.9070317964,
                1017.6885102996702,
              ],
              camRotate: [
                0.3007873373132639,
                0.03929381825023122,
                0.12343234701513542,
                0.944853125765931,
              ],
            },
            {
              title: "枪机",
              key: "0-0-1",
              camDir: [
                -0.14850754798803745,
                0.5586994552828733,
                -0.8159659471186291,
              ],
              camPos: [
                13288449.704849979,
                4130075.8578742715,
                1602.7053366876864,
              ],
              camRotate: [
                0.3007873373132639,
                0.03929381825023122,
                0.12343234701513543,
                0.944853125765931,
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    //点击数节点
    selectTreeNode(_, e) {
      let { node } = e;
      let { camDir, camPos, camRotate } = node.dataRef;
      if (!window?.BlackHole3D) {
        return;
      }
      if (camDir.length == 0) {
        return;
      }
      let camLoc = new BlackHole3D.RECamLoc();
      camLoc.camDir = camDir;
      camLoc.camPos = camPos;
      camLoc.camRotate = camRotate;
      BlackHole3D.Camera.setCamLocateTo(camLoc, 0.5, 1);
    },
    //点击树-复选框
    treeCheck(checkedKeys, e) {
      let { checked, node } = e;
      let { dataRef } = node;
      console.log({ checkedKeys, e });
    },
    //
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
  },
};
</script>

<style lang="less" scoped>
.camera-tree-container {
  color: #e0f8ff;
  /deep/.ant-tree-switcher {
    .anticon {
      font-size: 16px !important;
    }
  }
  /deep/.ant-tree-checkbox {
    .ant-tree-checkbox-inner {
      background: rgba(0, 144, 255, 0.2);
      border: 1px solid #0090ff;
      border-radius: 2px;
    }
    &.ant-tree-checkbox-checked {
      .ant-tree-checkbox-inner {
        background: #26ffab;
        border: 1px solid #26ffab;
        &::after {
          border-color: #00316c;
        }
      }
    }
    &.ant-tree-checkbox-indeterminate {
      .ant-tree-checkbox-inner {
        border: 1px solid #26ffab;
        &:after {
          background: #26ffab;
        }
      }
    }
  }
  /deep/.ant-tree-node-content-wrapper {
    &:hover,
    &.ant-tree-node-selected {
      background-color: rgba(0, 144, 255, 0.8) !important;
    }
    .ant-tree-title {
      color: #eef9ff;
      font-size: 16px;
      .tree-title {
        overflow: hidden;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
